<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-table.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script>
    <style>
        /* 新增全局内容区域样式 */
        .content-wrapper {
            margin-left: 200px; /* 与侧边栏宽度一致 */
            padding: 20px;
            transition: margin-left 0.3s ease; /* 平滑过渡 */
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .content-wrapper {
                margin-left: 60px; /* 小屏幕下侧边栏收缩后的间距 */
            }
        }
        /* 新增侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #f8f9fa;
            padding-top: 20px;
            z-index: 1000;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }

        .sidebar .menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar .menu li {
            padding: 10px 20px;
        }

        .sidebar .menu li a {
            color: #333;
            text-decoration: none;
            display: block;
            transition: all 0.3s ease;
        }

        .sidebar .menu li a:hover {
            background-color: #e9ecef;
            color: #007bff;
            transform: translateX(5px);
        }

        .sidebar .menu li.active {
            background-color: #007bff;
        }

        .sidebar .menu li.active a {
            color: white;
            font-weight: bold;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .sidebar {
                width: 60px;
                padding-top: 10px;
            }

            .sidebar .menu li {
                padding: 10px;
                text-align: center;
            }

            .sidebar .menu li a {
                padding: 10px;
                font-size: 14px;
            }

            .sidebar .menu li.active {
                position: relative;
            }

            .sidebar .menu li.active::after {
                content: "";
                position: absolute;
                top: 50%;
                right: -5px;
                transform: translateY(-50%);
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 5px solid #007bff;
            }

            .content-wrapper {
                margin-left: 60px;
            }
        }

        /* 用户信息显示样式 */
        .user-info {
            padding: 10px 20px;
            border-bottom: 1px solid #dee2e6;
            margin-bottom: 20px;
            background-color: #e9ecef;
        }

        .user-info .username {
            font-weight: bold;
            color: #495057;
        }

        .user-info .role {
            font-size: 12px;
            color: #6c757d;
        }

        /* 状态样式 */
        .status-normal {
            color: #28a745;
            font-weight: bold;
        }

        .status-disabled {
            color: #dc3545;
            font-weight: bold;
        }

        /* 按钮组样式 */
        .btn-group-status {
            margin-left: 5px;
        }
    </style>
</head>
<body>
<!-- 左侧菜单栏 -->
<div class="sidebar">
    <!-- 用户信息显示 -->
    <div class="user-info">
        <div class="username" id="currentUsername">加载中...</div>
        <div class="role" id="currentRole">加载中...</div>
        <button id="btn_logout" type="button" class="btn btn-sm btn-outline-secondary" style="margin-top: 5px;">
            <span class="glyphicon glyphicon-log-out"></span> 退出登录
        </button>
    </div>
    
    <ul class="menu">
        <li><a href="./product.html" data-target="product" id="menu-product">商品管理</a></li>
        <li><a href="./order.html" data-target="order">订单管理</a></li>
        <li class="active"><a href="#" data-target="index">用户管理</a></li>
    </ul>
</div>
<div class="content-wrapper">
    <div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center">用户管理</h3>
    </div>
    <div class="panel-body">

        <div id="toolbar" class="btn-group">
            <button id="btn_save" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
            </button>
            <button id="btn_delete" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
            <button id="btn_enable" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>启用
            </button>
            <button id="btn_disable" type="button" class="btn btn-warning">
                <span class="glyphicon glyphicon-ban-circle" aria-hidden="true"></span>禁用
            </button>
        </div>

        <table data-toggle="table" id="table" data-height="400"
               data-classes="table table-hover" data-striped="true"
               data-pagination="false" data-side-pagination="server"
               data-show-refresh="true" data-show-toggle="true"
               data-show-columns="true" data-toolbar="#toolbar">
            <thead>
            <tr>
                <th data-field="state" data-checkbox='ture'></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>
</div>
</div>
<!-- 添加用户模态框（Modal） -->
<div class="modal fade" id="saveModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">添加用户信息</h4>
            </div>
            <div class="modal-body">
                <form id="userForm">
                    <input type="hidden" id="id" name="id"/>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>姓名</label>
                                <input type="text" class="form-control" id="username" name="username">
                            </div>
                            <div class="form-group">
                                <label>真实姓名</label>
                                <input type="text" class="form-control" id="truename" name="truename">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" class="form-control" id="password" name="password">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>性别</label>
                                <select class="form-control" id="gender" name="gender">
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>年龄</label>
                                <input type="number" class="form-control" id="age" name="age">
                            </div>
                            <div class="form-group">
                                <label>地址</label>
                                <input type="text" class="form-control" id="address" name="address">
                            </div>
                            <div class="form-group">
                                <label>电话</label>
                                <input type="text" class="form-control" id="phone" name="phone">
                            </div>
                            <div class="form-group">
                                <label>状态</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="0">正常</option>
                                    <option value="1">禁用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="saveConfirmBtn">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
<script type="text/javascript">
    // 全局变量
    let currentUser = null;
    let isAdmin = false;

    $(document).ready(function() {
        // 检查用户权限
        checkUserPermission();
        
        $("button[name='toggle']").height(20);
        $("button[name='refresh']").height(20);
        $("#saveModal").modal('hide');
        // 新增初始化按钮状态
        $("#btn_edit, #btn_delete, #btn_enable, #btn_disable").prop("disabled", true);
    });

    // 检查用户权限
    function checkUserPermission() {
        // 从localStorage获取用户信息
        const userStr = localStorage.getItem('currentUser');
        if (userStr) {
            currentUser = JSON.parse(userStr);
            isAdmin = currentUser.username === 'admin';
            
            // 更新用户信息显示
            $('#currentUsername').text(currentUser.username);
            $('#currentRole').text(isAdmin ? '管理员' : '普通用户');
            
            // 如果不是管理员，跳转到商品页面
            if (!isAdmin) {
                alert('您没有权限访问用户管理页面');
                window.location.href = 'product.html';
                return;
            }
            
            // 根据权限显示/隐藏元素
            if (isAdmin) {
                $('#menu-product').text('商品管理');
            } else {
                $('#menu-product').text('商品浏览');
            }
        } else {
            // 如果没有用户信息，跳转到登录页
            window.location.href = 'login.html';
        }
    }

    //添加按钮点击事件
    $("#btn_save").click(function() {
        $("#saveModal").modal('show');
        $("#id").val("");
        $("#username").val("");
        $("#truename").val("");
        $("#gender").val("");
        $("#password").val("");
        $("#age").val("");
        $("#address").val("");
        $("#phone").val("");
        $("#status").val("0");
    });

    //编辑按钮点击事件
    $("#btn_edit").click(
    function edit() {
        var list = $("#table").bootstrapTable('getSelections');
        if (list == null || list.length <= 0) {
            alert("未选中任何项！");
            return;
        }
        else if (list.length > 1) {
            alert("请仅选择一条数据！");
            return;
        }

        var id = list[0].id;
        $("#saveModal").modal('show');
        //初始化用户信息
        $.ajax({
            url : 'user/queryUserById',
            data : {
                'id' : id
            },
            success : function(ret) {
            var ret = ret.data;
                $("#id").val(ret.id);
                $("#username").val(ret.username);
                $("#truename").val(ret.truename);
                $("#gender").val(ret.gender);
                $("#password").val(ret.password);
                $("#age").val(ret.age);
                $("#address").val(ret.address);
                $("#phone").val(ret.phone);
                $("#status").val(ret.status || "0");
            }
        });
    });

    function edit(id) {
        // 模拟编辑按钮点击事件
        $("#btn_edit").click();
    }

    function del(id) {
        if (confirm("是否删除选中的数据?")) {
            $.ajax({
                url: "user/deleteByList",
                type: 'post',
                dataType: 'json',
                data: { idList: [id] },
                success: function(data) {
                    alert("删除成功！");
                    $("#table").bootstrapTable("refresh");
                }
            });
        }
    }

    // 启用用户
    function enableUser(id) {
        if (confirm("是否启用该用户?")) {
            $.ajax({
                url: "user/enable",
                type: 'post',
                dataType: 'json',
                data: { id: id },
                success: function(data) {
                    alert(data.message);
                    $("#table").bootstrapTable("refresh");
                }
            });
        }
    }

    // 禁用用户
    function disableUser(id) {
        if (confirm("是否禁用该用户?")) {
            $.ajax({
                url: "user/disable",
                type: 'post',
                dataType: 'json',
                data: { id: id },
                success: function(data) {
                    alert(data.message);
                    $("#table").bootstrapTable("refresh");
                }
            });
        }
    }

    //添加用户模态框下的确认按钮点击事件
    $("#saveConfirmBtn").click(function() {
        // 依据传递的数据是否含有ID判断当前的操作是添加还是修改
        if ($("#id").val() == "") {
            //添加
            $("#saveModal").modal('hide');
            $.ajax({
                url : "user/save",
                type : 'post',
                dataType:'json',
                data : $("#userForm").serialize(),
                success : function(result) {
                    alert(result.message);
                    //重新加载表格
                    $("#table").bootstrapTable("refresh");
                }
            });
        } else {
            //修改
            $("#saveModal").modal('hide');
            $.ajax({
                url : "user/update",
                type : 'post',
                dataType:'json',
                data : $("#userForm").serialize(),
                success : function(result) {
                    alert(result.message);
                    //重新加载表格
                    $("#table").bootstrapTable("refresh");
                }
            });
        }
    });

    //删除按钮点击事件（可以批量删除）
    $("#btn_delete").click(function() {
        var list = $("table").bootstrapTable('getSelections');
        if (list == null || list.length <= 0) {
            alert("未选中任何项！");
            return;
        }

        var idList = new Array();
        for (var i = 0; i < list.length; i++) {
            idList[i] = list[i].id;
        }
        if (confirm("是否删除选中的数据?")) {
            $.ajax({
                url : "user/deleteByList",
                type : 'post',
                dataType : 'json',
                data : {
                    idList : idList
                },
                success : function(data) {
                    alert("删除成功！");
                    //重新加载表格
                    $("#table").bootstrapTable("refresh");
                }
            });
        }
    });

    // 启用按钮点击事件
    $("#btn_enable").click(function() {
        var list = $("table").bootstrapTable('getSelections');
        if (list == null || list.length <= 0) {
            alert("未选中任何项！");
            return;
        }

        var idList = new Array();
        for (var i = 0; i < list.length; i++) {
            idList[i] = list[i].id;
        }
        if (confirm("是否启用选中的用户?")) {
            $.ajax({
                url : "user/batchEnable",
                type : 'post',
                dataType : 'json',
                data : {
                    idList : idList
                },
                success : function(data) {
                    alert("启用成功！");
                    //重新加载表格
                    $("#table").bootstrapTable("refresh");
                }
            });
        }
    });

    // 禁用按钮点击事件
    $("#btn_disable").click(function() {
        var list = $("table").bootstrapTable('getSelections');
        if (list == null || list.length <= 0) {
            alert("未选中任何项！");
            return;
        }

        var idList = new Array();
        for (var i = 0; i < list.length; i++) {
            idList[i] = list[i].id;
        }
        if (confirm("是否禁用选中的用户?")) {
            $.ajax({
                url : "user/batchDisable",
                type : 'post',
                dataType : 'json',
                data : {
                    idList : idList
                },
                success : function(data) {
                    alert("禁用成功！");
                    //重新加载表格
                    $("#table").bootstrapTable("refresh");
                }
            });
        }
    });

    function updateButtonState() {
        const selections = $("#table").bootstrapTable('getSelections');
        // 编辑按钮：仅当选中1条时启用
        $("#btn_edit").prop("disabled", selections.length !== 1);
        // 删除按钮：选中至少1条时启用
        $("#btn_delete").prop("disabled", selections.length === 0);
        // 启用/禁用按钮：选中至少1条时启用
        $("#btn_enable, #btn_disable").prop("disabled", selections.length === 0);
    }

    $("#table").bootstrapTable({
        url : "user/list",
        clickToSelect : true,
        dataType : "json",
        contentType : "application/x-www-form-urlencoded;charset=utf-8",
        method : 'get',
        responseHandler : function(res) {
            //在ajax获取到数据，渲染表格之前，修改数据源
            return res.data;
        },
        columns : [
        {
            field : 'state',
        },
        {
            field : 'id',
            title : 'ID',
            align : 'center'
        },
        {
            field : 'username',
            title : '姓名',
            align : 'center'
        },
        {
            field : 'password',
            title : '密码',
            align : 'center'
        },
        {
            field : 'gender',
            title : '性别',
            align : 'center',
            formatter: function(value) {
                return value === 0 ? '男' : '女';
            }
        },
        {
            field : 'truename',
            title : '真实姓名',
            align : 'center'
        },
        {
            field : 'age',
            title : '年龄',
            align : 'center'
        },
        {
            field : 'address',
            title : '地址',
            align : 'center'
        },
        {
            field : 'status',
            title : '状态',
            align : 'center',
            formatter: function(value) {
                if (value === '0' || value === null) {
                    return '<span class="status-normal">正常</span>';
                } else {
                    return '<span class="status-disabled">禁用</span>';
                }
            }
        },
        {
            title: '操作',
            field: 'id',
            align: 'center',
            formatter: function(value, row, index) {
                var e = '<a href="#" mce_href="#" onclick="edit(\'' + row.id + '\')">编辑</a> ';
                var d = '<a href="#" mce_href="#" onclick="del(\'' + row.id + '\')">删除</a> ';
                var enable = '<a href="#" mce_href="#" onclick="enableUser(\'' + row.id + '\')" class="btn-group-status">启用</a> ';
                var disable = '<a href="#" mce_href="#" onclick="disableUser(\'' + row.id + '\')" class="btn-group-status">禁用</a> ';
                return e + d + enable + disable;
            }
        }],
        onCheck: function(row) {
            updateButtonState();
        },
        onUncheck: function(row) {
            updateButtonState();
        },
        onCheckAll: function(rows) {
            updateButtonState();
        },
        onUncheckAll: function(rows) {
            updateButtonState();
        }
    });

    // 退出登录按钮点击事件
    $("#btn_logout").click(function() {
        if (confirm('确定要退出登录吗？')) {
            localStorage.removeItem('currentUser');
            window.location.href = 'login.html';
        }
    });

</script>
</html>
